<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个 JQuery 程序</title>
    <!-- 第一：下载JQ -->

    <!-- 第二：在页面中，导入 JQ 文件 -->
    <script src="../jquery-3.7.1.js"></script>

    
</head>
<body>
    <ul id="liFather">
        <li class="sg">张三</li>
        <li id="em">李四</li>
        <li class="sg">王五</li>
        <li class="liuliu">赵六</li>
    </ul>

    <button id="btnAdd1">添加（父子）</button>
    <button id="btnAdd2">添加（兄弟）</button>

    <button id="btnDel1">删除节点</button>
    <button id="btnDel2">选择性删除</button>
    <button id="btnDel3">保留性删除</button>
    <button id="btnDel4">删除所有（清空）</button>

    <button id="btnClone">复制节点</button>

    <button id="btnReplace">替换节点</button>

    <!-- 第三：使用 JQ -->
    <script>
        
        // 1.以父子的关系添加节点
        $("#btnAdd1").click(function(){
            // 第一：选择要操作的节点 
            // 1.创建新的节点
            var liNode = $("<li>赵六</li>")

            // 2.选择 ul 节点
            var ulNode = $("#liFather") ;

            // 第二：进行相关的操作 - 添加操作
            // ulNode.append(liNode) ;
            liNode.appendTo(ulNode) ;

            // ulNode.prepend(liNode); 
        }) ;
        
        // 2.以兄弟的关系添加节点
        $("#btnAdd2").click(function(){
            // 第一：选择要操作的节点
            // 1.创建 li 节点
            var liNode = $("<li>田七</li>") ;

            // 2.选择李四的 li 节点
            var liSiLiNode = $("#liFather li:eq(1)");

            // 第二：操作
            // liSiLiNode.before(liNode) ;
            liSiLiNode.after(liNode) ;
        }) ;

        $("#btnDel1").click(function(){
            // 第一：选择要操作的节点
            var ulNode = $("#liFather");

            // 第二：操作 - 删除
            ulNode.remove() ;
        }) ;

        $("#btnDel2").click(function(){
            // 第一：选择要操作的节点
            var liNodes = $("#liFather li");

            // 第二：操作 - 删除
            liNodes.remove("[class=sg]") ;
        }) ;

        $("#btnDel3").click(function(){
            console.log(".......");
            
            // 第一：选择要操作的节点
            var liSiLi = $("#em");

            // 第二：操作 - 删除 - 返回删除的节点
            var delLi = liSiLi.detach() ;

            $("#liFather").append(delLi) ;
        }) ;

        $("#btnDel4").click(function(){
            console.log(".......");
            
            // 第一：选择要操作的节点
            var ulNode = $("#liFather");

            // 第二：操作 - 删除 - 清空
            ulNode.empty() ;

            // $("#liFather li").remove() ;
        }) ;

        // 给赵六的 li 节点绑定事件
        $(".liuliu").click(function(){
            alert("你点击了赵六...")
        }) ;

        $("#btnClone").click(function(){
                       
            // 第一：选择要操作的节点
            var zhaoLiuNode = $(".liuliu");

            // 第二：操作 - 复制并添加到页面中
            // 1.复制节点 - true：复制事件，false不会复制事件
            var cloneNode = zhaoLiuNode.clone(false) ;

            // 2.添加页面
            $("#liFather").prepend(cloneNode) ;
        }) ;

        $("#btnReplace").click(function(){           
            // 第一：选择要操作的节点
           var liSiNode = $("#em");
           var newLiNode = $("<li>美女李四</li>")

            // 第二：操作
            liSiNode.replaceWith(newLiNode) ; 
            // newLiNode.replaceAll(liSiNode) ; 
        }) ;



    </script>
</body>
</html>